<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport"
			content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
		<title>期刊详情</title>
		<link rel="stylesheet" href="/mobile/layui/css/layui.css" />
		<link rel="stylesheet" href="/mobile/css/mobile.css" />
		<script src="/mobile/js/jquery.min.js"></script>
		<script src="/mobile/js/jquery.easing.min.js"></script>
		<script src="/mobile/layui/layui.js"></script>

	</head>
	<body>
		<div>
			<a href="javascript:window.history.go(-1)" class="iconfont top_back">&#xe7ed;</a>
		</div>
		<div class="qiye_xiangqing">
			<div class="hd2">
			    <div style="background-image:url({$rs.image});background-position:center;background-repeat:no-repeat; background-size:auto 80%;width:100%;padding:50% 0">>

			    </div>

				<div class="title">{$rs.name}</div>
			</div>
			<div style="display:flex; align-items:center; padding:15px;">
				<a href="javascript:void(0)" lay-on="test-offset-b"><i class="iconfont" style="color:#214194; font-size:42px">&#xe63c;</i></a>
				<div style="flex:1;margin-left:15px; display:flex;justify-content: space-between;">
					<a class="layui-btn layui-btn-lg layui-btn-normal layui-btn-radius" style="flex:1;" href="{:url('shukan/qikan_dingyue',['id'=>$rs.id])}">订阅纸刊</a>
					{if($rs.name=='《橡塑技术与装备》')}<a class="layui-btn layui-btn-lg layui-btn-normal layui-btn-radius" style="flex:1;" href="{:url('shukan/qikan_tougao',['id'=>$rs.id])}">在线投稿</a>{/if}
				</div>

			</div>
			<div class="bd" style="border-bottom:none;">
				<ul>
					<li><label>主管单位：</label><div>{$rs.zhuguandanwei}</div></li>
					<li><label>主办单位：</label><div>{php}$arr=explode('、',$rs['zhubandanwei']);foreach($arr as $v){echo "<p>".$v."</p>";}{/php}</div></li>
					<li><label>协办单位：</label><div>{php}$arr=explode('、',$rs['xiebandanwei']);foreach($arr as $v){echo "<p>".$v."</p>";}{/php}</div></li>
					<li><label>发行周期：</label><div>{$rs.faxingzhouqi}</div></li>
					<li><label>国内刊号：</label><div>{$rs.guoneikanhao}</div></li>
					<li><label>国际刊号：</label><div>{$rs.guojikanhao}</div></li>
				</ul>
			</div>

		</div>
		<div class="bg_gray_main">
			<div style="text-align:center">期刊年份：<div class="year_select_container"><select id="year_select">
			{volist name="years" id="item"}
				<option value="{$item}" {php}
					if($year!=''){
						if($year==$item){
							echo 'selected';
						}
					}else{
						if($i==0){
							echo 'selected';
						}
					}

				{/php}>{$item}</option>
			{/volist}
			</select></div></div>

			<ul class="book_list">
				{volist name="rs_qikan" id="item" empty="$empty"}
				<a href="{:url('shukan/qikanqishu_detail',['id'=>$item.id])}"><li><div class="img" style="background-image: url({$item.image});"></div>
					<div class="title">{$item.qishu}</div>
				</li></a>
				{/volist}
			</ul>

		</div>
	</body>
	<script>
		$('#year_select').on('change', function() {

		        console.log($(this).val());
				window.location.href="{:url('shukan/qikan_detail')}?id={$rs.id}&year="+$(this).val();
		    });
		var layer = layui.layer;
		layui.use(function(){
		  layer = layui.layer;
		  var util = layui.util;
		  var $ = layui.$;
		  // 事件
		  util.on('lay-on', {
		    'test-offset-b': function(){
		      layer.open({
		        type: 1,
				title: '联系客服',
		        offset: 'b',
		        anim: 'slideUp', // 从下往上
		        area: ['100%', '320px'],
		        shade: 0.1,
		        shadeClose: true,
		        id: 'ID-demo-layer-direction-b',
		        content: '<div style="padding: 16px;">'+
					'<div style="display:flex;justify-content:space-between; margin-bottom:15px;">'+
						'<img src="{$site.dingyuekefu1}" style="width:150px;height:150px;">'+
						'<img src="{$site.dingyuekefu2}" style="width:150px;height:150px;">'+
					'</div>'+
					'<a href="tel:{$site.kefutel}"><div style="text-align:center">联系电话:{$site.kefutel}</div></a>'+
					'<div style="display:flex;justify-content:space-between; margin-top:15px;">'+
						'<button class="layui-btn layui-btn-normal layui-border-normal layui-btn-radius" onclick="save_pic()">保存图片到相册</button>'+
						'<button class="layui-btn layui-btn-normal layui-border-normal layui-btn-radius" onclick="copy({$site.kefutel})">一键复制联系电话</button>'+
					'</div>'+
				'</div>'
		      });
		    },

		  });
		});
		function copy(text) {

		  const input = document.createElement('textarea');
		  input.value = text;
		  document.body.appendChild(input);
		  input.select();
		  document.execCommand('copy');
		  document.body.removeChild(input);
		  layer.msg('复制成功');
		}
		function save_pic(){
			// 获取图片URL
			var imgUrl = '{$site.dingyuekefu1}';

			// 创建一个临时的链接元素
			var link = document.createElement('a');
			link.href = imgUrl;

			// 设置链接元素的下载属性为图片的名称
			link.download = get_file_name('{$site.dingyuekefu1}');

			// 将链接元素点击事件派发到文档
			document.body.appendChild(link);
			link.click();
			document.body.removeChild(link);

			// 获取图片URL
			var imgUrl = '{$site.dingyuekefu2}';

			// 创建一个临时的链接元素
			var link = document.createElement('a');
			link.href = imgUrl;

			// 设置链接元素的下载属性为图片的名称
			link.download = get_file_name('{$site.dingyuekefu2}');

			// 将链接元素点击事件派发到文档
			document.body.appendChild(link);
			link.click();
			document.body.removeChild(link);
		}
		function get_file_name(url){


			// 创建 URLSearchParams 对象并传入 URL
			fileName=url.split('/');
			return fileName[fileName.length-1];
		}
		console.log(get_file_name('{$site.dingyuekefu1}'));


	</script>
</html>
